<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in" ref="applyHeight">
      <div class="cornerComment-in-title">
        <span>互动详情</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody" v-if="editForm">
        <div class="task-body">
          <div class="task-box task-info">
            <p class="task-box-title">互动详情</p>
            <div class="task-box-detail task-info-detail">
              <el-row>
                <el-col :span="12">
                  <div class="task-line-list">
                    <span class="task-detail-title">互动名称：</span>
                    <span>{{ editForm.name }}</span>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="task-line-list">
                    <span class="task-detail-title">发布人：</span>
                    <span>{{ editForm.admin_name }}</span>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="task-line-list">
                    <span class="task-detail-title">下发时间：</span>
                    <span>{{ editForm.create_time }}</span>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="task-line-list">
                    <span class="task-detail-title">限改时间：</span>
                    <span>{{ editForm.end_time }}</span>
                  </div>
                </el-col>
                <!--                <el-col :span="12">-->
                <!--                  <div class="task-line-list">-->
                <!--                    <span class="task-detail-title">任务状态：</span>-->
                <!--                    <span class="task-status mr-10">{{ taskStatusText }}</span>-->
                <!--                    &lt;!&ndash;                    未处理的执行人进行接受，转派； 未处理 执行中 已转派 待审核 驳回 完成 &ndash;&gt;-->
                <!--                  </div>-->
                <!--                </el-col>-->
                <el-col :span="24">
                  <div class="task-line-list">
                    <span class="task-detail-title">互动说明：</span>
                    <div v-html="editForm.descript" class="contentTitle"></div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="task-box task-file">
            <p class="task-box-title">附件文件</p>
            <div class="task-file-detail task-box-detail">
              <el-row v-if="editForm.appendix">
                <el-col :span="12" v-for="(item,index) in editForm.appendix" :key="index">
                  <div class="task-line-list">
                    <span>附件{{ index + 1 }}：</span>
                    <span class="file-link">
                      <btn_file :option="item"></btn_file>
                    </span>
                  </div>
                </el-col>
              </el-row>
              <el-row v-else>
                <el-col :span="24">
                  <div class="task_file_list">
                    未找到相关文件
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="task-box task-user">
            <p class="task-box-title mb-10">{{acticveWorke==1?'我的执行情况':'互动执行成员'}}</p>
            <tips optionTemplate="interacDetailUsers"></tips>
            <div class="task-user-detail">
              <el-table
                  :data="editForm.workuser"
                  border
                  style="width: 100%">
                <el-table-column
                    prop="id"
                    label="ID"
                    align="center"
                width="80">
                </el-table-column>
                <el-table-column
                    label="执行人"
                    align="center">
                  <template slot-scope="scope">
                    {{ scope.row.user ? scope.row.user.realname : '--' }}
                  </template>
                </el-table-column>
                <el-table-column
                    prop="is_end"
                    label="执行状态"
                    align="center">
                  <template slot-scope="scope">
                    <el-link type="danger" v-if="scope.row.is_end=='未处理'">未处理</el-link>
                    <el-link type="success" v-if="scope.row.is_end=='完成'">完成</el-link>
                  </template>
                </el-table-column>
                <el-table-column
                    label="批注"
                    align="center">
                  <template slot-scope="scope">
                    <span class="tablelineBtn" @click="lookPizhu(scope.row.id)" v-if="scope.row.is_end=='完成'">查看批注</span>
                  </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    align="center"
                    width="180">
                  <template slot-scope="scope">
                    <el-button type="primary" size="small" plain v-if="(Number(acticveWorke)==2||Number(acticveWorke)==3) && scope.row.is_end=='完成'" @click="noteId=scope.row.id,remarkVisible=true">
                      批注
                    </el-button>
                    <el-button type="text" size="small"
                               @click="isPreview=true,commonOption=scope.row,commonVisible=true"
                               v-if="(Number(acticveWorke)==2||Number(acticveWorke)==3) && scope.row.is_end=='完成'">
                      查看详情
                    </el-button>
                    <!--                    编辑只有是我的工作里面才可执行-->
                    <el-button type="text" size="small" @click="commonOption=scope.row,commonVisible=true"
                               v-if="Number(acticveWorke)!==3 && userInfo.id == scope.row.user_id">
                      {{ scope.row.is_end == '完成' ? '编辑互动内容' : '填写互动内容' }}
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
      <div class="cornerComment-in-footer">
        <el-button @click.native="closePOpup" size="small">返回</el-button>
      </div>
    </div>
    <!--    isPreview 是否只是预览 true false -->
    <commonWorke :visible.sync="commonVisible" :workId="workId" @InitFn="InitFn" :commonOption="commonOption"
                 :acticveWorke="acticveWorke"></commonWorke>
    <remarkFile :visible.sync="remarkVisible" :noteId="noteId" remarkType="1"></remarkFile>
    <pizhu :visible.sync="pizhuVisible" :fileId="fileId" remarkType="1"></pizhu>
  </div>
</template>

<script>
import {
  mapActions,
  mapGetters
} from 'vuex';
import {fileIndex} from '@/api/admin/file_directory.js'
import {interactionAdd, interactionDetail, interactionEdit} from "@/api/admin/interaction"
import commonWorke from "./commonWorke";
import remarkFile from "./remarkFile";
import pizhu from "./pizhu";

export default {
  props: ['visible', 'workId', 'acticveWorke'], // tabValue 任务类型
  components: {
    commonWorke,
    remarkFile,
    pizhu
  },
  data() {
    return {
      pizhuVisible: false,
      remarkVisible: false,
      commonVisible: false,
      dialogVisible: false,
      noteReplyVisible: false,
      uservisible: false,
      treeList: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      fileId: '',
      filterText: '',
      checkFileOption: {},
      heightBox: 0,
      editForm: null,
      taskStatusText: '',
      dynamicTagsArray: {},
      teskCommon: {
        commonvisible: false,
        commonType: '',
        taskUserId: '',
      },
      noteId: 0,
      canCheckBtn: false, // 接受按键 转派按键 日志的执行人才可操作
      fileSrc: '', // 档案目录
      is_read: false, // 是否是审阅人
      commonOption: null
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        this.InitFn()
      } else {
        this.clearPageData()
      }
    }
  },
  created() {
  },
  methods: {
    clearPageData() {
      this.editForm = null
      this.canCheckBtn = false
    },
    // 详情数据
    InitFn() {
      interactionDetail({id: this.workId}).then(res => {
        if (res.vo.appendix && res.vo.appendix !=='[]') {
          if (res.vo.appendix.indexOf('{') !== -1) {
            let list_ = res.vo.appendix ? JSON.parse(res.vo.appendix) : []
            for (let item of list_) {
              item.popover = false
            }
            res.vo.appendix = list_
          } else {
            res.vo.appendix = [{name: '附件1', src: res.vo.appendix, popover: false}]
          }
        }else{
          res.vo.appendix = ''
        }
        // 需要判断是执行者还是，发布者
        // acticveWorke 1 我的工作 2 我的发布 3 总数据预览
        let workuser = []
        if (Number(this.acticveWorke) === 1) {
          // 只需要展示我的
          for (let item of res.vo.workuser) {
            if (item.user_id === this.userInfo.id) {
              workuser.push(item)
            }
          }
          res.vo.workuser = this.getJson(workuser)
        }
        this.editForm = res.vo
      })
    },
    getFileSrc() {
      fileIndex({}).then(data => {
        let a = {}
        for (let item of data.list) {
          a[item.id] = item
        }
        this.getFileName(a, this.editForm.path_id, [])
      })
    },
    getFileName(data, id, name) {
      if (data[id]) {
        name.push(data[id].name)
        if (data[id].parent_id) {
          this.getFileName(data, data[id].parent_id, name)
        } else {
          let src = name.reverse();
          this.fileSrc = src.join('/')
        }
      }
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    taskChangeTakeFn(option) {
      this.uservisible = true
    },
    lookPizhu(id) {
      console.log(id)
      this.fileId = id;
      this.pizhuVisible = true;
    },
    openCommonDialog(option) {
      this.teskCommon.commonType = option
      this.teskCommon.commonvisible = true
    },
    showNoteFn(id) {
      this.noteId = id
      this.noteReplyVisible = true
    },
    getReview(id) {
      this.$confirm('确认审阅内容, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 0 通过 1 驳回
        taskExamine({type: this.tabValue, data: {id: id, type: 0}}).then(data => {
          console.log('data:', data)
          if (data.code) {
            this.$message.error(data.msg)
          } else {
            this.$message.success(data.msg)
            this.InitFn()
          }
        })
      }).catch(() => {
      });
    },
  },
  mounted() {
  }
}
</script>
<style scoped>
.contentTitle {
  flex: 1;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
}

#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 80%;
  height: 80%;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 10px;
  flex: 1;
  overflow-y: auto;
  background: #eee;
}

.close-Btn-line {
  cursor: pointer;
}

.jobTime span {
  padding: 0 10px;
}

.task-box {
  background: #fff;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 20px;
}

.task-box-title {
  border-left: 3px solid #009bfb;
  padding-left: 10px;
  height: 15px;
  line-height: 15px;
}

.task-line-list {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.task-detail-title {
  display: block;
  width: 75px;
}

.task-box-detail {
  margin-top: 20px;
}

.file-link {
  color: #1b8de5;
  cursor: pointer;
}

.file-link:hover {
  text-decoration: underline;
}

.task-status {
  color: red;
}

.task_file_list {
  text-align: center;
  color: #999;
}
</style>
